var src;
var index = 0;
var li_size = $("li").length;
var li_w = $("li").outerWidth();
var blcx = ($(".div4 img").outerWidth() - $(".div4").outerWidth()) / ($(".div2").outerWidth() - $(".move").outerWidth());
var blcy = ($(".div4 img").outerHeight() - $(".div4").outerHeight()) / ($(".div2").outerHeight() - $(".move").outerHeight());
$(".div2").mousemove(function (ex) {
    $(".move").show();
    $(".div4").show();
    var x = ex.pageX - $(".move").outerWidth(true) / 2;
    var y = ex.pageY - $(".move").outerHeight(true) / 2;
    if (x < 0) {
        x = 0;
    } else if (x > ($(".div2").outerWidth() - $(".move").outerWidth(true))) {
        x = ($(".div2").outerWidth() - $(".move").outerWidth(true));
    }
    if (y < 0) {
        y = 0;
    } else if (y > ($(".div2").outerHeight() - $(".move").outerHeight(true))) {
        y = ($(".div2").outerHeight() - $(".move").outerHeight(true));
    }
    $(".move").css({"left": x, "top": y});
    $(".div4 img").css({"left": -x * blcx, "top": -y * blcy});
});
$(".div2").mouseout(function () {
    $(".move").hide();
    $(".div4").hide();
});
$("li").click(function () {
    index = $(this).index();
    src = $(this).children("img").attr("src");
    $(this).addClass("select").siblings().removeClass("select");
    $(".div2 img").attr("src", src);
    $(".div4 img").attr("src", src);
});
$(".left").click(function () {
    index--;
    auto();
    alert(index);
});
$(".right").click(function () {
    index++;
    auto();
});
function auto() {
    if (index < 0) {
        index = 0;
    } else if (index > li_size - 4) {
        index = li_size - 4;
    }
    $("ul").stop().animate({"left": -index * li_w});
}
